<template>
  <el-card class="box-card">
  <div slot="header" class="clearfix">
    <!-- 表头 -->
  <div class="breadcrumb" v-if="this.$route.query.id || this.$route.query.name">
    <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item>学科管理</el-breadcrumb-item>
  <el-breadcrumb-item>python</el-breadcrumb-item>
  <el-breadcrumb-item>目录管理</el-breadcrumb-item>
</el-breadcrumb>

  </div>
    <el-form ref="ruleForm">
       <el-form-item label="目录名称" class="input">
       <el-input v-model="directoryName" class="inputyi"  ></el-input>
       </el-form-item>
      <el-form-item label="状态" class="option">
      <el-select v-model="state" placeholder="请选择"   :popper-append-to-body="false">
      <el-option label="启用" value="1"></el-option>
      <el-option label="禁用" value="0"></el-option>
    </el-select>
      <el-button @click="eliminateFn">清除</el-button>
      <el-button type="primary" @click="searchFn">搜索</el-button>
     </el-form-item>
     <!-- 右边新增学科按钮 -->
     <el-form-item v-if="this.$route.query.id || this.$route.query.name">
      <el-button type="text" icon='el-icon-back' size="medium" class="size" @click="$router.push('/subjects/list')">返回学科</el-button>
     </el-form-item>
      <el-form-item  class="suj">
    <el-button  type="success" icon="el-icon-edit" @click="addedFn">新增目录</el-button>
    </el-form-item>
      </el-form>
      <!-- 总数据提示条 -->
      <template>
      <el-alert
      :title="`数据一共${counts}条`"
      type="info"
      show-icon
      :closable="false">
    </el-alert>
        </template>
  </div>
    <div class="text item">
      <template>
        <!-- 表格组件 -->
        <direform  :subjectarr='Directorylist' @modify='modiFn' @removeFn='removeFn' @stateFn='stateFn'/>
      </template>
  </div>
  <!-- 新增学科弹框 -->
    <el-dialog
    :title="isEit ? '新增学科' :'修改学科'"
    :visible.sync="dialogVisible"
      width="22%"
     @close='cancelFn'
    >
   <el-form  ref="ruleForm"  :model="ruleForm" class="form"   :rules="rules" v-if="!$route.query.id">
     <el-form-item label="所属学科" prop="region" class="itemyi">
       <!-- <div class="div"> -->
          <el-select v-model="ruleForm.region" placeholder="请选择"  class="optionyi">
        <el-option v-for="(obj,index) in subjectNamelist" :key="index" :label="obj" :value="obj"></el-option>
        </el-select>
       <!-- </div> -->
       </el-form-item>
    </el-form>
    <el-form  ref="ruleFormss"  :model="ruleForm" class="form"   :rules="rules">
       <el-form-item label="目录名称" class="inputsan" prop="directoryName">
       <el-input class="inputer" v-model.trim="ruleForm.directoryName"  placeholder="请选择目录名称"></el-input>
      </el-form-item>
    </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible=false">取 消</el-button>
    <el-button type="primary" @click="determineFn">确 定</el-button>
  </span>
</el-dialog>
<!-- 分页 -->
<el-pagination
     :hide-on-single-page='true'
      background
      :page-sizes="[5, 10, 20, 40]"
      :page-size="pagesize"
      layout="prev, pager, next,sizes, jumper"
      :total="counts"
      @size-change='handleSizeChange'
      @current-change="handleCurrentChange"
     >
    </el-pagination>
</el-card>
</template>

<script>
import direform from '@/components/direform'
// import { mapGetters, mapMutations } from 'vuex'
// import { details, addsubjectFn, detailsFn, modifyAPI, removeAPI } from '@/api/subject/subject.js'
import { DirectorylistAPI, removeAPI, addedAPI, modifyFn, jiandNAPI } from '@/api/directorys'
export default {
  name: 'Directorys',
  components: {
    direform
  },
  data () {
    return {
      Directorylist: [], // 目录列表
      subjectNamelist: [], // 所属学科列表
      jiandanlist: [], // 简单列表
      dialogVisible: false, // 新增学科弹框是否显示
      state: null, // 状态
      isEit: true, // 判断是增加还是修改
      directoryName: '', // 搜索框里的目录名称
      searchFne: false,
      row: {},
      counts: 0, // 数据总数
      id: '', // 数据id
      page: 1, // 当前页码
      pages: 0, // 总页数
      pagesize: 10, // 每页显示数量
      subjectName: '', // 学科名字
      ruleForm: {
        region: '', // 下拉框绑定的值(所属学科)
        subjectName: '', // 新增学科输入值
        directoryName: '' // 目录名称
      },
      rules: {
        region: [
          { required: true, message: '请选择目录名称', trigger: 'change' }
        ],
        directoryName: [
          { required: true, message: '请输入所属学科', trigger: 'blur' }
        ]

      }
    }
  },
  created () {
    this.jiandNFn()
    // 判断路由路径是否有值，有值获取目录列表详情 无 获取目录列表
    this.$route.query.id || this.$route.query.name ? this.subjectFn() : this.getDirectorylistFn()
  },
  computed: {

  },
  methods: {
    // 获取目录列表
    async getDirectorylistFn (subjectID, name) {
      const res = await DirectorylistAPI({
        page: this.page,
        pagesize: this.pagesize,
        state: this.state,
        directoryName: this.directoryName,
        subjectID: subjectID
      })
      console.log(2)
      const { items, counts, page, pages, pagesize } = res.data
      // 列表数据
      this.Directorylist = items
      // 数据总数
      this.counts = counts
      // 当前页码
      this.page = Number(page)
      // 总页数
      this.pages = pages
      // 每页显示数量
      this.pagesize = Number(pagesize)
    },
    // 点击新增学科
    async addedFn () {
      this.isEit = true
      this.dialogVisible = true
    },
    // 点击确定
    async determineFn () {
      let a = null
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          return
        }
        a = valid
      })
      this.$refs.ruleFormss.validate((valid) => {
        if (!valid) { return }
        a = valid
      })
      if (a) {
        this.isEit ? this.addtoFn() : this.modifyFne()
        // 重新获取目录列表
        this.$route.query.id ? await this.getDirectorylistFn(this.$route.query.id) : await this.getDirectorylistFn()
        // 重置表单
        this.$refs.ruleForm.resetFields()
        this.dialogVisible = false
        this.$message.success('操作成功')
      }
    },
    // 添加数据接口
    async  addtoFn () {
      const a = this.jiandanlist.filter(item => item.label === this.ruleForm.region).map(item => item.value)

      await addedAPI({
        subjectID: a[0] || Number(this.$route.query.id),
        directoryName: this.ruleForm.directoryName
      })
      console.log(1)
      // console.log(res)
    },
    // 点击取消
    cancelFn () {
      // 关闭弹框
      this.dialogVisible = false
      // 重置表单
      console.log(this.$refs.ruleForm)
      this.$refs.ruleForm.resetFields()
      this.$refs.ruleFormss.resetFields()
    },
    // 点击搜索
    async searchFn () {
      // if (this.directoryName === '') return
      this.getDirectorylistFn()
    },
    // 点击清除
    eliminateFn () {
      this.directoryName = ''
      this.state = ''
      // this.$refs.ruleForm.resetFields()
    },
    // 点击 修改按钮
    async modiFn (row, id) {
      this.dialogVisible = true
      this.isEit = false
      this.id = id
      this.row = row
      console.log(row)
      this.$nextTick(() => {
        this.ruleForm.directoryName = row.directoryName
        // 数据回填
        this.ruleForm.region = row.subjectName
      })
    },
    // 修改数据
    async modifyFne () {
      console.log(this.jiandanlist)
      const a = this.jiandanlist.filter(item => item.label === this.ruleForm.region).map(item => item.value)
      console.log(a)
      const res = await modifyFn({
        id: this.id,
        subjectID: a[0] || this.$router.query.id,
        directoryName: this.ruleForm.directoryName
      })
      this.$route.query.id ? this.getDirectorylistFn(this.$route.query.id, this.$route.query.name) : this.getDirectorylistFn()
      console.log(res)
    },
    // 点击删除
    removeFn (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await removeAPI({
          id: id
        })
        await this.getDirectorylistFn()
        console.log(res)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        console.log(this.Directorylist.length)
        if (this.Directorylist.length === 0) {
          this.page--
          this.getDirectorylistFn()
          if (this.page <= 0) {
            this.page = 1
          }
        }
      }).catch(() => {
      })
    },
    // 点击启用刷新状态
    stateFn () {
      this.$route.query.id ? this.getDirectorylistFn(this.$route.query.id, this.$route.query.name) : this.getDirectorylistFn()
    },
    // 每页条数
    handleSizeChange (val) {
      console.log(val)
      this.pagesize = val
      this.getDirectorylistFn()
      this.$route.query.id ? this.subjectFn() : this.getDirectorylistFn()
      // console.log(this.pages)
    },
    // 当前页数
    handleCurrentChange (val) {
      console.log(val)
      this.page = val
      this.$route.query.id ? this.subjectFn() : this.getDirectorylistFn()

      // console.log(this.pages)
    },
    // 路由跳转
    RoutingFn () {
      const id = this.$route.query.id
      const subjectName = this.$route.query.name
      this.subjectName = subjectName
      this.id = id
    },
    // 路由跳转查找学科
    async subjectFn () {
      const res = await DirectorylistAPI({
        page: this.page,
        pagesize: this.pagesize,
        subjectID: this.$route.query.id
      })
      const { items, counts } = res.data
      // 列表数据
      this.Directorylist = items
      // 数据总数
      this.counts = counts
    },
    async jiandNFn () {
      const res = await jiandNAPI()
      this.jiandanlist = res.data
      this.subjectNamelist = res.data.map(item => item.label)
      function unique (arr) {
        // 遍历arr，把元素分别放入tmp数组(不存在才放)
        const tmp = []
        for (var i in arr) {
          // 该元素在tmp内部不存在才允许追加
          if (tmp.indexOf(arr[i]) === -1) {
            tmp.push(arr[i])
          }
        }
        return tmp
      }
      const arr = unique(this.subjectNamelist)
      this.subjectNamelist = arr
    }
  }
}
</script>

<style scoped>
 /deep/ .itemyi .el-input{
   width: 270px;
 }

.div{
  width: 400px;
}
.toolbar .el-input--suffix.optionyi {
  width: 200px;
}

.itemyi{
  width: 400px;
  margin-right: 10px;
}
.inputer{
  width: 270px;
}
.inputsan{
  width: 400px;
}
.breadcrumb{
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-bottom: 15px;
  border-bottom: 1px solid #f4f4f5;
}
.size{
  font-size: 13px;
}

</style>
<style scoped>
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: flex;
    justify-content: space-between;
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  .el-card__header{

    border-bottom:0;
  }
  .el-input{
    width: 200px;
    margin: 0 10px;
  }
  .el-input--medium .el-input__inner{
    height: 34px;
  }

  .el-button--medium{
    font-size: 12px;
    border-radius:4px
  }
  .el-form{
    display: flex;
    justify-content: space-between;
  }
  .el-form-item__content{
      margin: 0;
  }
  /* .el-input--medium .el-input__inner {
    width: 300px;
    height: 36px;
} */
.input{
  width: 280px;
  height: 30px;
  margin-left: 8px;
}
.dialog-footer{
  margin-left: 214px;

}
.el-form-item__label{
  padding: 0;
  margin-left: 3px;
}
.el-switch{
height: 40px;
margin-left: 10px;
}
.el-form-item--medium{
margin-left: 6px;
}
.suj{
  margin-right: 3px;
  margin-bottom: 5px;
}
.el-card__header{
  padding: 18px 20px 0 20px;
}
.el-pagination{
  padding-left: 1250px;
}
.option{
  margin-right:720px;
  width: 500px;
}
.input{
  width: 300px;
}

.form{
  width: 500px;
}
 .box-card /deep/ .el-card__header{
  border-bottom: 0;
  padding: 18px 20px 0 20px;
}

/* .option .el-input__inner{
  width: 200px;
} */
/* .el-input__inner{
  width: 200px;
} */
  </style>
